
<html>

<head></head>

<body>
    <div id="myDIV" class="header">
        <h2 style="margin:5px">我的任务</h2>
        <input type="text" id="myInput" placeholder="添加标题...">
        <span onclick="newElement()" class="addBtn">添加</span>
    </div>
    <ul id="myUL">
        <li>打肥鹅<span class="close">Ũ</span></li>
        <li class="checked">打企鹅<span class="close">Ũ</span></li>
        <li>踢肥鹅<span class="close">Ũ</span></li>
        <li>打完肥鹅去吃饭<span class="close">Ũ</span></li>
        <li>打完企鹅去吃饭<span class="close">Ũ</span></li>
        <li>踢完肥鹅去吃饭<span class="close">Ũ</span></li>
    </ul>
    <style>
        body {
          margin: 0;
          min-width: 250px;
        }
        
        * {
          box-sizing: border-box;
        }
        
        ul {
          margin: 0;
          padding: 0;
        }
        
        ul li {
          cursor: pointer;
          position: relative;
          padding: 12px 8px 12px 40px;
          background: #eee;
          font-size: 18px;
          transition: 0.2s;
          
          /*-webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;*/
        }
        
        ul li:nth-child(odd) {
          background: #f9f9f9;
        }
        
        ul li:hover {
          background: #ddd;
        }
        
        ul li.checked {
          background: #888;
          color: #fff;
          text-decoration: line-through;
        }
        
        ul li.checked::before {
          content: '';
          position: absolute;
          border-color: #fff;
          border-style: solid;
          border-width: 0 2px 2px 0;
          top: 10px;
          left: 16px;
          transform: rotate(45deg);
          height: 15px;
          width: 7px;
        }
        
        .close {
          position: absolute;
          right: 0;
          top: 0;
          padding: 12px 16px 12px 16px;
        }
        
        .close:hover {
          background-color: #f44336;
          color: white;
        }
        
        .header {
          background-color: #f44336;
          padding: 30px 40px;
          color: white;
          text-align: center;
        }
        
        .header:after {
          content: "";
          display: table;
          clear: both;
        }

        input {
          border: none;
          width: 75%;
          padding: 10px;
          float: left;
          font-size: 16px;
        }
        
        .addBtn {
          padding: 10px;
          width: 25%;
          background: #d9d9d9;
          color: #555;
          float: left;
          text-align: center;
          font-size: 16px;
          cursor: pointer;
          transition: 0.3s;
        }
        
        .addBtn:hover {
          background-color: #bbb;
        }
    </style>

    <script>
        // 创建关闭按钮附加到每一项
        var myNodelist = document.getElementsByTagName("LI");
        var i;
        for (i = 0; i < myNodelist.length; i++) {
          var span = document.createElement("SPAN");
          var txt = document.createTextNode("\u00D7");
          span.className = "close";
          span.appendChild(txt);
          myNodelist[i].appendChild(span);
        }
        
        // 点击关闭隐藏
        var close = document.getElementsByClassName("close");
        var i;
        for (i = 0; i < close.length; i++) {
          close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
          }
        }
        
        // 点击每一项时添加选中
        var list = document.querySelector('ul');
        list.addEventListener('click', function(ev) {
          if (ev.target.tagName === 'LI') {
            ev.target.classList.toggle('checked');
          }
        }, false);
        
        // 点击添加时创建新的列表项
        function newElement() {
          var li = document.createElement("li");
          var inputValue = document.getElementById("myInput").value;
          var t = document.createTextNode(inputValue);
          li.appendChild(t);
          if (inputValue === '') {
            alert("请输入内容！");
          } else {
            document.getElementById("myUL").appendChild(li);
          }
          document.getElementById("myInput").value = "";
        
          var span = document.createElement("SPAN");
          var txt = document.createTextNode("\u00D7");
          span.className = "close";
          span.appendChild(txt);
          li.appendChild(span);
        
          for (i = 0; i < close.length; i++) {
            close[i].onclick = function() {
              var div = this.parentElement;
              div.style.display = "none";
            }
          }
        }
    </script>
</body>

</html>